<template>
  <div>
    <breadcrumb></breadcrumb>
    <div class="head">
      <div class="titleBox">
        <div class="iconfontcolor icon-chuangjiandingdan"></div>
        <div class="infoBox">
          <div class="info_line1">
            <h3 class="tit">{{ mood.orderNo }}</h3>
            <!-- orderStatus<=4 -->
            <div class="tag yellow" v-if="mood.orderStatus < 5">未起运</div>
            <div class="tag" v-else-if="mood.orderStatus < 7">运输中</div>
            <div class="tag" v-else-if="mood.orderStatus == 7">已送达</div>
<!--            <div class="tag" v-else-if="mood.orderStatus < 10">待签收</div>-->
            <div class="tag finisheded" v-else-if="mood.orderStatus < 12">
              已完成
            </div>
            <div class="tag red" v-else-if="mood.orderStatus == 12">已取消</div>
          </div>
          <div class="info_line2">
            <div style="margin-right: 15px">
              创建时间：{{ mood.createTime }}
            </div>
            <div>下单人：{{ mood.customerName }}</div>
          </div>
        </div>
        <button class="deleteBtn" v-if="!mood.orderStatus == 12">取消</button>
      </div>
      <div class="OrderSteps">
        <div class="center">
          <el-steps :space="200" :active="stepsActive" align-center>
            <el-step title="未起运" description>
              <template slot="icon">
                <div class="CircleDian" :class="{ active: stepsActive == 1 || stepsActive > 1 }"></div>
              </template>
            </el-step>
            <el-step title="运输中">
              <template slot="icon">
                <div class="CircleDian" :class="{ active: stepsActive == 2 || stepsActive > 2 }"></div>
              </template>
            </el-step>
            <el-step title="已送达">
              <template slot="icon">
                <div class="CircleDian" :class="{ active: stepsActive == 3 || stepsActive > 3 }"></div>
              </template>
            </el-step>
<!--            <el-step title="待签收">-->
<!--              <template slot="icon">-->
<!--                <div class="CircleDian" :class="{ active: stepsActive == 4 || stepsActive > 4 }"></div>-->
<!--              </template>-->
<!--            </el-step>-->
            <el-step title="已完成">
              <template slot="icon">
                <div class="CircleDian" :class="{ active: stepsActive == 5 }"></div>
              </template>
            </el-step>
          </el-steps>
        </div>
      </div>
    </div>
    <div class="main">
      <div class="marin_item">
        <div class="titleBox">
          <div class="icon-xinxi iconfontcolor"></div>
          <h3 class="title">订单信息</h3>
          <div class="line"></div>
        </div>
        <div>
          <el-descriptions :column="3" :labelStyle="{
            color: '#939393',
            fontSize: '12px',
            fontWeight: 'bold',
            marginRight: '20px',
          }" :contentStyle="{
  color: '#262626',
  fontSize: '12px',
}">
            <el-descriptions-item label="货主">{{
              mood.cargoName
            }}</el-descriptions-item>
            <el-descriptions-item label="项目名称">{{
              mood.projectName
            }}</el-descriptions-item>
            <!--            <el-descriptions-item label="机会名称"-->
            <!--              >我是一个机会名称</el-descriptions-item-->
            <!--            >-->
            <el-descriptions-item label="业务类型">{{
              mood.orderTypeStr
            }}</el-descriptions-item>
            <el-descriptions-item label="下单人">{{
              mood.customerName
            }}</el-descriptions-item>
            <el-descriptions-item label="承运方">{{
              mood.supplierName
            }}</el-descriptions-item>
            <el-descriptions-item label="发货时间">{{
              mood.shippedTime
            }}</el-descriptions-item>
            <el-descriptions-item label="送达时间">{{
              mood.finishTime
            }}</el-descriptions-item>
            <el-descriptions-item label="订单截止时间">{{
              mood.endTime
            }}</el-descriptions-item>
            <el-descriptions-item label="计量方式">{{
              mood.measureUnitStr
            }}</el-descriptions-item>
            <el-descriptions-item label="计量单位">{{
              mood.pricingMethodStr
            }}</el-descriptions-item>
            <el-descriptions-item label="运量">{{
              mood.cargoWeight
            }}</el-descriptions-item>
            <el-descriptions-item label="车型">{{
              mood.name
            }}</el-descriptions-item>
            <el-descriptions-item label="参数">
              <div>
                载方范围{{ mood.capacity }}方, 车高{{ mood.height }}, 车厢长度{{
                  mood.length
                }}米, 车辆载重{{ mood.loads }}KG
              </div>
            </el-descriptions-item>
            <el-descriptions-item label="订单备注" :span="3">{{
              mood.description || '无'
            }}</el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
      <div class="marin_item">
        <div class="titleBox">
          <div class="icon-xinxi iconfontcolor"></div>
          <h3 class="title">运费信息</h3>
          <div class="line"></div>
        </div>
        <div>
          <el-descriptions :column="3" :labelStyle="{
            color: '#939393',
            fontSize: '12px',
            fontWeight: 'bold',
            marginRight: '20px',
          }" :contentStyle="{
  color: '#262626',
  fontSize: '12px',
}">
            <el-descriptions-item label="货主单价">{{ mood.ownerUnitPrice }}元</el-descriptions-item>
            <el-descriptions-item label="货主金额">{{ mood.totalAmount }}元</el-descriptions-item>
            <el-descriptions-item label="承运方单价">{{ mood.transUnitPrice }}元</el-descriptions-item>
            <el-descriptions-item label="承运方金额">{{ mood.contractorAmount }}元</el-descriptions-item>
            <el-descriptions-item label="其他费用">{{
              mood.otherAmount == null ? "0" : mood.otherAmount
            }}元</el-descriptions-item>
            <el-descriptions-item label="其他费用是否支付">{{
              mood.isPayOtherAmount || '无'
            }}</el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
      <div class="marin_item">
        <div class="titleBox">
          <div class="icon-xinxi iconfontcolor"></div>
          <h3 class="title">企业信息</h3>
          <div class="line"></div>
        </div>
        <div style="margin-bottom: 15px">
          <el-descriptions :column="3" :labelStyle="{
            color: '#939393',
            fontSize: '12px',
            fontWeight: 'bold',
            marginRight: '20px',
          }" :contentStyle="{
  color: '#262626',
  fontSize: '12px',
}">
            <el-descriptions-item label="线路名称">
              <div>
                {{ mood.lineName == null ? "无" : mood.lineName }}
              </div>
            </el-descriptions-item>
            <el-descriptions-item label="距离(公里)">1111</el-descriptions-item>
          </el-descriptions>
        </div>
        <div class="list">
          <el-table style="width: 100%" header-align="center" border :data="shippingAndReceivingInfoVos">
            <el-table-column align="center" prop="" width="80" label="序号">
              <template slot-scope="scope">
                <div>
                  {{ scope.$index + 1 }}
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="transportStr" label="运单状态">
            </el-table-column>
            <el-table-column align="center" label="运单编号" min-width="130">
              <template slot-scope="scope">
                <div>
                  <el-button type="text" size="small">{{
                    scope.row.waybillNo
                  }}</el-button>
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="driverName" label="司机姓名">
            </el-table-column>
            <el-table-column align="center" prop="numberPlate" label="车辆信息">
            </el-table-column>
            <el-table-column align="left" prop="" label="发货地" min-width="185">
              <template slot-scope="scope">
                <div v-if="scope.row.shippingAddress.length != 0">
                  <div v-for="(item, i) in  scope.row.shippingAddress" :key="i">{{ item }}</div>
                </div>
                <div v-else>无</div>
              </template>
            </el-table-column>
            <el-table-column align="left" prop="" label="目的地" min-width="185">
              <template slot-scope="scope">
                <div v-if="scope.row.receivingAddress.length != 0">
                  <div v-for="(item, i) in scope.row.receivingAddress" :key="i">{{ item }}</div>
                </div>
                <div v-else>无</div>
              </template>
            </el-table-column>

            <!-- <el-table-column align="center" label="发货地/目的地">
              <template slot-scope="scope">
                <div style="
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: space-between;
                  ">
                  <el-button type="text" size="small">{{
                    scope.row.shippingAddress
                  }}</el-button>
                  <el-button type="text" size="small">{{
                    scope.row.receivingAddress
                  }}</el-button>
                </div>
              </template>
            </el-table-column> -->
            <el-table-column align="center" prop="cargoQuantity" label="货物数量" >
              <template slot-scope="scope">
                <div>{{ scope.row.cargoQuantity || '--.--' }}</div>
              </template>
            </el-table-column>
            <!-- <el-table-column align="center" prop="unitPrice" label="司机运费"></el-table-column>
            <el-table-column align="center" prop="otherAmount" label="其他费用"></el-table-column> -->
            <el-table-column align="center" prop="OrderReceivingTime" label="接单时间">
              <template slot-scope="scope">
                <div>
                  <div>{{ scope.row.createTime }}</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" label="货物明细" width="105">
              <template slot-scope="scope">
                <div>
                  <el-button type="text" size="small" @click="showDialog(scope.$index)">查看</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>

    <!-- 详情对话框 -->
    <el-dialog class="shippingDetail" title="货物明细" :visible.sync="dialogVisible" width="900px">
      <div class="NoDataBox" v-if="huowu.length == 0">
        <img class="NoData" src="../../assets/img/noData.png" alt="">
      </div>
      <div v-for="(item, i) in huowu" :key="i">
        <div class="titleBox">
          <div class="mudi">目的地:</div>
          <div class="address">{{ item.title }}</div>
        </div>
        <div class="dialog_list">
          <el-table :data="item.orderCargoDetails" style="width: 100%" header-align="left">
            <el-table-column align="left" prop="" width="80" label="序号">
            </el-table-column>
            <el-table-column align="left" prop="cargoType" label="大类"></el-table-column>
            <el-table-column align="left" prop="cargoName" label="货物名称"></el-table-column>
            <el-table-column align="left" prop="freightVolume" label="运量">
            </el-table-column>
            <el-table-column align="left" prop="brand" label="品牌">
            </el-table-column>
            <el-table-column align="left" prop="cargoVolume" label="规格">
            </el-table-column>
            <el-table-column align="left" prop="cargoWeight" label="数量">
            </el-table-column>
            <el-table-column align="left" prop="description" label="备注">
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import breadcrumb from "@/components/breadcrumb.vue";
import httpApi from "@/http";
export default {
  data() {
    return {
      stepsActive: 3,
      dialogVisible: false,
      tableData: [
        {
          WaybillStatus: "运单状态",
          WaybillNumber: "F1234567890",
          DriverName: "王彪",
          VehicleInfo: "车辆信息",
          shipmentDestination: ["重庆光环购物公园", "升伟家居建材市场"],
          Quantity: "5",
          DriverFreight: "1000.00元",
          OtherExpenses: "200.00元",
          OrderReceivingTime: "2023-05-26 17:37:06",
          id: "0123",
        },
      ],
      records: [
        {
          type: "建材",
          name: "铝合金门窗",
          freightVolume: "运量",
          brand: "品牌",
          specs: "40系列",
          quantity: "5",
          notes: "这是一段备注",
        },
      ],
      mood: {},
      shippingAndReceivingInfoVos: [],
      huowu: [],
    };
  },
  created() {
    this.cread();
    this.cread1();
  },
  methods: {
    calcStepsActive() {
      let orderStatus = this.mood.orderStatus;
      // console.log('orderStatus', this.mood.orderStatus)

      if (orderStatus == 1) {
        //1 未发布
        this.stepsActive = 0;
      } else if (orderStatus < 4 || orderStatus == 4) {
        //2 3 4
        this.stepsActive = 1; //未起运
      } else if (orderStatus < 7) {
        //5 6
        this.stepsActive = 2; //运输中
      } else if (orderStatus == 7) {
        //7
        this.stepsActive = 3; //已送达
      }
      // else if (orderStatus < 10) {
      //   //8 9
      //   this.stepsActive = 4; //待签收
      // }
      else if (orderStatus < 12) {
        // 10 11
        this.stepsActive = 5; //已完成
      } else if (orderStatus == 12) {
        //已取消  //12
        this.stepsActive = 0;
      }
    },

    //获取货物明细详情
    async cread1() {
      let res = await httpApi.SettlementDocApi.platformOrdegoodsr({
        orderId: this.$route.query.id,
      });
      this.huowu = res.data.data;
      // console.log(this.huowu)
    },
    // 获取承运订单详情
    async cread() {
      let res = await httpApi.cargoOwnerApi.getAcceptCarriageListdetail({
        orderId: this.$route.query.id,
      });
      this.mood = res.data.data;
      this.shippingAndReceivingInfoVos =
        res.data.data.shippingAndReceivingInfoVos;
      this.shippingAndReceivingInfoVos.forEach(item=>{
        item.shippingAddress=item.shippingAddress.split(',')
        item.receivingAddress=item.receivingAddress.split(',')
      })
      // console.log('详情', this.mood)
      this.calcStepsActive(); //判断步骤进度 给步骤条赋值
    },
    showDialog(index) {
      // console.log("index="+index)
      let params = {
        orderId: this.$route.query.id + "", //取得订单
      };
      // console.log("orderId=",params)
      let v = this;
      httpApi.orderManagementApi.orderGoods(params).then(function (rsp) {
        // console.log("orderGoods.response=",rsp)
        v.huowu = rsp.data.data;
        // console.log("huowu=",v.huowu)
      });
      this.dialogVisible = true;
    },
  },
  components: {
    breadcrumb,
  },
};
</script>

<style lang="scss" scoped>
.head {
  height: 119px;
  width: 100%;
  display: flex;
  margin-bottom: 10px;

  .titleBox {
    margin-right: 10px;
    flex: 1;
    background-color: #fff;
    height: 119px;
    display: flex;
    align-items: center;
    padding: 0 35px;

    .icon-chuangjiandingdan {
      font-size: 43px;
      margin-right: 10px;
    }

    .infoBox {
      display: flex;
      flex-direction: column;
      justify-content: center;

      .info_line1 {
        margin-bottom: 3px;
        display: flex;
        align-items: center;

        >.tit {
          font-size: 18px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          margin-right: 8px;
          color: #262626;
        }

        >.tag {
          background-color: #ecf5fe;
          border-radius: 4px;
          width: 54px;
          height: 20px;
          color: #1890ff;
          font-size: 10px;
          text-align: center;
          line-height: 20px;

          &.finisheded {
            background-color: #ebfef5;
            color: #1acb7a;
          }

          &.yellow {
            background-color: #fffce8;
            color: #f9aa0d;
          }

          &.red {
            background-color: #fde8e9;
            color: #f5222d;
          }
        }
      }

      .info_line2 {
        display: flex;
        color: #939393;
        font-size: 12px;
      }
    }

    .deleteBtn {
      border: 1px solid #d9d9d9;
      border-radius: 4px;
      color: #262626;
      font-size: 12px;
      width: 80px;
      height: 36px;
      line-height: 36px;
      text-align: center;
      cursor: pointer;
      margin-left: auto;

      &:hover {
        opacity: 0.8;
        transition: 0.2s;
      }
    }
  }

  .OrderSteps {
    min-width: 451px;
    background-color: #fff;
    height: 119px;
    display: flex;
    align-items: center;

    .center {
      width: 400px;
      margin: 0 auto;
    }

    // 去组件默认样式
    ::v-deep .el-step__icon.is-text {
      border: none;
    }

    // 修改 连接线颜色
    ::v-deep .el-step.is-horizontal .el-step__line {
      background-color: #c0c4cc;
    }

    .CircleDian {
      width: 8.1px;
      height: 8.1px;
      border-radius: 50%;
      background-color: #c4c4c4;

      &.active {
        background-color: #1890ff;
      }
    }

    ::v-deep .el-step__title.is-finish {
      font-size: 12px;
      color: #1890ff;
      font-weight: 700;
    }

    ::v-deep .el-step__title.is-process {
      font-size: 12px;
      color: #c4c4c4;
    }

    ::v-deep .el-step__title.is-wait {
      color: #c4c4c4;
      font-size: 12px;
    }
  }
}

.main {
  background-color: #fff;
  padding: 35px 68px 35px 35px;

  .marin_item {
    margin-bottom: 40px;

    .titleBox {
      display: flex;
      align-items: center;
      margin-bottom: 14px;

      >.icon-xinxi {
        font-size: 16px;
        margin-right: 7px;
      }

      >.title {
        color: #262626;
        font-size: 14px;
        margin-right: 14px;
      }

      >.line {
        height: 1px;
        flex: 1;
        background-color: #f0f0f0;
      }
    }

    .list {
      height: calc(100% - 112px);

      ::v-deep .el-table__body-wrapper {
        max-height: calc(100vh - 414px) !important;
        overflow-y: scroll;
      }

      // 表头样式
      ::v-deep .el-table__header th {
        padding: 8.05px 0;
      }

      ::v-deep .el-table__header th {
        background-color: #f5f5f5;
        color: #262626;
        font-size: 12px;
        font-weight: bold;
        text-align: center;
        

        // 表 body的td
        ::v-deep .el-table__body td {
          color: #595959;
          font-size: 12px;
        }
      }
    }
  }
}

.shippingDetail {
  .NoDataBox {
    width: 100%;
    display: flex;
    align-items: center;
    height: 300px;
    justify-content: center;

    .NoData {
      height: 70%;
      width: 50%;
    }
  }
  ::v-deep .el-dialog__body {
    padding: 35px 32px 80px 32px;
  }

  ::v-deep .el-dialog__header {
    border-bottom: 1px solid #f0f0f0;
  }

  .titleBox {
    display: flex;
    margin-bottom: 19px;

    .mudi {
      color: #939393;
      font-size: 12px;
      margin-right: 19px;
    }

    .address {
      color: #262626;
      font-size: 12px;
    }
  }

  .dialog_list {

    // 表头样式
    ::v-deep .el-table__header th {
      padding: 8.05px 0;
    }

    ::v-deep .el-table__header th {
      background-color: #f5f5f5;
      color: #262626;
      font-size: 12px;
      font-weight: bold;
      text-align: left;

      // 表 body的td
      ::v-deep .el-table__body td {
        color: #262626;
        font-size: 12px;
      }
    }
  }
}
</style>
